<template>
  <div class="dice-same">
    <div class="select-row">
      <tail-box :place="item.place.context" class="tail-box-adjust"></tail-box>
      <lottery-dice
        v-for="(dices, pIndex) in item.numbers" 
        :key="dices.id"
        :dices="dices"
        class="dices"
        @click.native="handleLotterySelect(pIndex)"
        >
      </lottery-dice>
    </div>
  </div>
</template>

<script>
import TailBox from '@/components/base/tail-box/tail-box'
import LotteryDice from '@/components/base/lottery-dice/lottery-dice'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    TailBox,
    LotteryDice
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '复选'
          },
          diceInfo: [
            {
              id: 1,
              selected: false,
              numbers: '1,1',
              color: 'red',
              icon: 'iconshaizi_one',
            },
            {
              id: 2,
              selected: false,
              numbers: '2,2',
              icon: 'iconshaizi_two',
            },
            {
              id: 3,
              selected: false,
              numbers: '3,3',
              icon: 'iconshaizi_three',
            },
            {
              id: 4,
              selected: false,
              numbers: '4,4',
              color: 'red',
              icon: 'iconshaizi_four',
            },
            {
              id: 5,
              selected: false,
              numbers: '5,5',
              icon: 'iconshaizi_fives',
            },
            {
              id: 6,
              numbers: '6,6',
              icon: 'iconshaizi_six',
              selected: false
            },
          ]
        }
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleLotterySelect(index) {
      let diceObj = this.clonedItem.numbers[index]
      diceObj.selected = diceObj.selected ? false : true
      this.$emit('click', this.clonedItem)
    }
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
  }
}
</script>

<style lang="stylus" scoped>
    .dice-same
      width 100%
      box-sizing border-box 
      padding 0 20px
      .select-row 
        display flex
        padding 20px 0
        .tail-box-adjust
          line-height 36px
          width 60px
          box-sizing border-box
        .dices 
          margin-left 20px
        .select-all 
          height 38px 
          line-height 38px
          box-sizing border-box
          padding 0 12px
          margin-left 20px
</style>